<template>
  <div class="alter-user-block">
    <div class="tabs">
      <button 
        :class="['tab-button', { active: activeTab === 'syntax' }]"
        @click="activeTab = 'syntax'"
      >
        语法图
      </button>
      <button 
        :class="['tab-button', { active: activeTab === 'code' }]"
        @click="activeTab = 'code'"
      >
        代码
      </button>
    </div>
    
    <div class="tab-content">
      <div v-if="activeTab === 'syntax'" class="syntax-diagrams">
        <div v-if="loading" class="loading">
          正在生成语法图...
        </div>
        <div v-else-if="error" class="error">
          {{ error }}
        </div>
        <div v-else-if="diagrams.length === 0" class="no-diagrams">
          未找到可解析的语法定义
        </div>
        <div v-else class="diagram-container">
          <div 
            v-for="(diagram, index) in diagrams" 
            :key="index"
            class="diagram-item"
          >
            <h4 v-if="diagram.name" class="diagram-title">{{ diagram.name }}</h4>
            <div 
              class="diagram-svg"
              v-html="diagram.svg"
            ></div>
          </div>
        </div>
      </div>
      
      <div v-if="activeTab === 'code'" class="code-content">
        <pre><code>{{ code }}</code></pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { generateSyntaxDiagrams } from '../utils/syntaxDiagram'

interface Props {
  code: string
}

const props = defineProps<Props>()

const activeTab = ref<'syntax' | 'code'>('syntax')
const loading = ref(false)
const error = ref('')
const diagrams = ref<Array<{name: string, svg: string}>>([])

// 提取语法定义部分
const syntaxContent = computed(() => {
  const lines = props.code.split('\n')
  const syntaxLines: string[] = []
  let inSyntaxBlock = false
  
  for (const line of lines) {
    if (line.trim().startsWith('#')) {
      inSyntaxBlock = true
      continue
    }
    
    if (inSyntaxBlock) {
      if (line.trim() === '' || line.startsWith('```')) {
        break
      }
      syntaxLines.push(line)
    }
  }
  
  return syntaxLines.join('\n')
})

// 生成语法图
const generateDiagrams = () => {
  if (!syntaxContent.value.trim()) {
    diagrams.value = []
    return
  }
  
  loading.value = true
  error.value = ''
  
  try {
    diagrams.value = generateSyntaxDiagrams(syntaxContent.value)
  } catch (err) {
    console.error('生成语法图失败:', err)
    error.value = `生成语法图失败: ${err instanceof Error ? err.message : String(err)}`
    diagrams.value = []
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  generateDiagrams()
})
</script>

<style scoped>
.alter-user-block {
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  margin: 1rem 0;
  background: #fff;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #e1e4e8;
  background: #f6f8fa;
}

.tab-button {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #586069;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.tab-button:hover {
  color: #24292e;
  background: #f1f3f4;
}

.tab-button.active {
  color: #24292e;
  border-bottom-color: #0366d6;
  background: #fff;
}

.tab-content {
  padding: 16px;
}

.syntax-diagrams {
  min-height: 100px;
}

.loading {
  text-align: center;
  color: #586069;
  padding: 20px;
}

.error {
  color: #d73a49;
  padding: 16px;
  background: #ffeef0;
  border-radius: 4px;
  border: 1px solid #f97583;
}

.no-diagrams {
  text-align: center;
  color: #586069;
  padding: 20px;
}

.diagram-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.diagram-item {
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  padding: 16px;
  background: #fafbfc;
}

.diagram-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #24292e;
}

.diagram-svg {
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.diagram-svg :deep(svg) {
  max-width: 100%;
  height: auto;
}

.diagram-svg :deep(.start-end) {
  fill: #0366d6;
}

.code-content {
  background: #f6f8fa;
  border-radius: 4px;
  padding: 16px;
  overflow-x: auto;
}

.code-content pre {
  margin: 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.45;
  color: #24292e;
}

.code-content code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}
</style> 